<!--  -->
<template>
  <div class="contact-list">
    <!-- <div class="contact-list-hd">
      <van-search v-model="name" />
    </div> -->
    <!-- {{rootStyle}} -->
    <div class="contact-list-bd" :style="rootStyle">
      <div class="contact-main">
        <!-- 字母 -->
        <div class="contact-letter">
          <div :class="[`contact-letter-item`,activeSidebar === item ? `contact-letter-item-active` : '']" v-for="(item) in letters" :key="item" @click.prevent="handleSidebarItemClick(item)">{{item}}
            <div v-if="showSidebarTip && activeSidebar === item" :class="`contact-letter-item-sidebar-tip`">
              <span :class="`contact-letter-item-sidebar-tip-text`">
                {{ activeSidebar }}
              </span>
            </div>
          </div>
        </div>
        <!-- 字母 -->
        <!-- {{selectVal}} -->
        <!-- 内容 -->
        <van-index-bar ref="userSelect" :index-list="letters" :sticky="false" @change="handerBarChange">
          <van-checkbox-group v-model="selectVal" @change="checkChange">
          <div class="contact-section-item" v-for="item in letters" :key="item">
            <van-index-anchor :index="item">
              <div class="contact-section-item-letter">{{item}}</div>
            </van-index-anchor>
            <div class="contact-section-item-group">
              <div class="contact-section-user" v-for="(user,index) in listData[item]" :key="item + '_' + index">
                <van-checkbox :name="user">{{user.UserName}}</van-checkbox>
              </div>
            </div>
          </div>
          </van-checkbox-group>
        </van-index-bar>
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactList',
  data() {
    return {
      name:'',
      timeOut: undefined,
      showSidebarTip:false,
      activeSidebar: '',
      activeIndex: -1,
      //根据通讯录名字得到的首字母 
      letters:[], 
      //处理过后的相应数据
      listData: {},
      // 选中的数据
      selectVal:[],
    };
  },
  props:{
    height:{
      type:Number,
    },
    user: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  //组件
  components: {},
  //在实例创建完成后被立即调用
  created: function () {
    this.getUsers()
  },
  //计算属性  将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  computed: {
    rootStyle(){
      if (typeof this.height !== 'number') {
        return {};
      }
      const height = Number(this.height);
      return { height: height === 0 ? 0 : `${height}px` };
    }
  },
  //dom 加载完后执行
  mounted: function () {},
  //方法
  methods: {

    // sidebar click
    handleSidebarItemClick(index){
      console.log(index)
      this.$refs.userSelect && this.$refs.userSelect.scrollTo(index)
      this.activeSidebar = index
      this.showSidebarTip = true;
    },
    //
    handerBarChange(v){
      console.log(v)
      this.activeSidebar = v
      this.showSidebarTip = true;
    },
    // 把数据弄出去
    checkChange(){
      this.$emit("update:user", this.selectVal);
    },
    // 获取部门下人员 
    getUsers(){
      this.searchLoading = true
      let list = [{ "UserId": 277765, "UserName": "李雅丽", },{ "UserId": 277630, "UserName": "杨东升", },{ "UserId": 276994, "UserName": "Simon", },{ "UserId": 276729, "UserName": "王康雨", },{ "UserId": 275475, "UserName": "海大测试管理员", },{ "UserId": 274607, "UserName": "毛盾", },{ "UserId": 274495, "UserName": "张巍丽", },{ "UserId": 273085, "UserName": "谭伟仪", },{ "UserId": 273084, "UserName": "吕斌", },{ "UserId": 272950, "UserName": "翟韬", },{ "UserId": 272947, "UserName": "杨亨宝", },{ "UserId": 272945, "UserName": "郭振", },{ "UserId": 272944, "UserName": "崔雅娟", },{ "UserId": 272943, "UserName": "何斌", },{ "UserId": 272942, "UserName": "徐一钦", },{ "UserId": 272940, "UserName": "郎峻嵩", },{ "UserId": 272939, "UserName": "陈庆", },{ "UserId": 272938, "UserName": "刘文涛", },{ "UserId": 272937, "UserName": "余静静", },{ "UserId": 272936, "UserName": "任桂超", },{ "UserId": 272935, "UserName": "石兵帅", },{ "UserId": 272933, "UserName": "梅杰", },{ "UserId": 272931, "UserName": "王子", },{ "UserId": 272930, "UserName": "侯召晖", },{ "UserId": 272929, "UserName": "张伟Bob", },{ "UserId": 272928, "UserName": "容子涵", },{ "UserId": 272927, "UserName": "学冬测试12", },{ "UserId": 272926, "UserName": "周佳辉", },{ "UserId": 272925, "UserName": "温镇强", },{ "UserId": 272923, "UserName": "胡雨捷", },{ "UserId": 272922, "UserName": "王宇皓", },]
      let letters = []
      let users = {}
      list.forEach(el => {
        // 字母
        let py = window.pinyin.getCamelChars(el.UserName)
        let firstLetter = py.substring(0,1)
        let findLetter = letters.find(ele => ele === firstLetter)
        !findLetter && letters.push(firstLetter)
        // 人员按照字母归类
        if(users[firstLetter]) {
          users[firstLetter].push(el)
        } else {
          users[firstLetter] = [el]
        }
      })
      console.log(Object.entries(users))
      this.letters = letters.sort()
      this.listData = users

      this.searchLoading = false
    },
    // 清除弹窗
    clearSidebarTips(){
      if (this.showSidebarTip && this.activeSidebar !== '') {
        this.timeOut && clearTimeout(this.timeOut);
        this.timeOut = window.setTimeout(() => {
          this.showSidebarTip = false;
        }, 1000);
      }
    },
  },
  //一个对象，键是需要观察的表达式，值是对应回调函数
  watch: {
    showSidebarTip(v){
      if(v) this.clearSidebarTips()
    }
  },
  beforeDestroy(){
    this.timeOut && clearTimeout(this.timeOut);
  },
};
</script>

<style scoped lang="less">
  @import './contact-list.less';
</style>

